import React, { useMemo, useState } from 'react';
import { CodeArea, Switch, DataSet } from 'choerodon-ui/pro';
import JSFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSFormatter';
import codeAreaDS from './codeAreaDataSet';
// 这两个主题不是组件内置的主题，需要手动引入
import 'codemirror/theme/material.css';
import 'codemirror/theme/idea.css';

// 引入格式化器
// 引入 javascript lint
import 'choerodon-ui/pro/lib/code-area/lint/javascript';
// 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
if (typeof window !== 'undefined') {
  // 提供对应语言的语法高亮
  require('codemirror/mode/javascript/javascript');
}

const jsStyle = { height: 500 };

const codeAreaBsic: React.FC = () => {
  const formDateSet = useMemo(() => new DataSet(codeAreaDS()), []);
  const [theme, setTheme] = useState('material');
  const handleThemeChange = async () => {
    if(theme === 'material'){
      setTheme('idea');
    }else{
      setTheme('material');
    }
  };

  return (
    <div>
      <h4>Javascript</h4>
      <CodeArea
        dataSet={formDateSet}
        name="content"
        options={{mode: 'javascript', theme}}
        style={jsStyle}
        formatter={JSFormatter}
      />
      <Switch onChange={handleThemeChange} unCheckedChildren="idea">material</Switch>
    </div>
  );
};
export default codeAreaBsic;